<template>
    <div>
     <nav>
        <ul class="pagination">
            <li @click="prevClick">
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
            </li>
            <li :class="[num==currentPage?'active':'']" v-for="num in totalPage" :key="num" @click="uPageClick(num)"><a href="#">{{num}}</a></li>
            <li @click="nextClick">
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
            </li>
        </ul>
    </nav>
    </div>
</template>

<script>
import {mapActions,mapState,mapMutations} from 'vuex'
    export default {
        data(){
            return {

            }
        },
        computed:{
            ...mapState({
                 totalPage :state => state.book.totalPage,
                 currentPage :state => state.book.bkPagination.currentPage
            })
          
        },
        methods:{
            ...mapMutations([
                'setBkCurrentPage'
            ]),
            ...mapActions([
                'getBookList'
            ]),
            // 点击数字点击跳转
            uPageClick(num){
                this.setBkCurrentPage(num)
                this.getBookList()
            },
            // 点击上一页跳转
            prevClick(){
                 let num = this.currentPage
                 num = num <=1 ? 1: --num
                 this.setBkCurrentPage(num)
                 this.getBookList()
            },
            nextClick(){
                 let num = this.currentPage
                 num = num >=this.totalPage ?this.totalPage: ++num
                 this.setBkCurrentPage(num)
                 this.getBookList()
            }
        }
    }
</script>

<style scoped>

</style>